<html>
<head>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link href="${ctx}/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="${ctx}/font-awesome/3.0.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="${ctx}/bootstrap-table/1.12.0/bootstrap-table.min.css" rel="stylesheet">
    <link href="${ctx}/css/index.css" rel="stylesheet">
    <script src="${ctx}/jquery/2.1.4/jquery.min.js"></script>
    <script src="${ctx}/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="${ctx}/bootstrap-table/1.12.0/bootstrap-table.min.js"></script>

    <style>
        * {
            font-size: 12px;
        }

        [class^="col-"] {
            vertical-align: middle;
            line-height: 34px;
            min-height: 34px;
            margin-bottom: 12px;
        }

        .form-control {
            margin: 0;
        }

        .form-control-static {
            min-height: 34px;
            padding: 0;
            margin-bottom: 0;
        }

        .align-right {
            text-align: right;
        }

        input {
            padding-left: 15px;
        }
    </style>

</head>
<body>
<#if roles??>
    <div class="items">
        <#list roles as role>
            <div class="col-xs-4">
                <div class="input-group">
      <span class="input-group-addon">
        <input type="checkbox" data-id="${role.roleId}" <#if role.selected>checked="checked"</#if>>
      </span>
                    <span class="form-control">${role.title}</span>
                </div>
            </div>
        </#list>
    </div>
</#if>

<script>
    $(function () {
        $(".items input[type='checkbox']").on("click", function () {
            var roleid = $(this).attr("data-id");
            var groupid = '${groupid}';
            $.post('/group/role', {
                groupid: groupid,
                roleid: roleid
            }, function (res) {
                if ("OK" === res) {
                    console.log(res);
                }
            });
        });
    });
</script>
</body>
</html>
